<html>
    <head>
        <title>样式</title>
    </head>
    <body>
        <script>
            /*
                 nvue 锁支持的通用样式已经在本文档中全部列出
            */

            /*
                一、注意事项：

                            1、nvue 的css 仅支持flex布局，是webview 的css语法的子集。这是因为操作系统原生排版不支持非 flex的之外的web布局。 

                                    当然 flex 足以排布出各种页面，只是写法需要适应。


                            2、class 进行绑定时只支持数组语法

                            3、不支持媒体查询

                            4、不能使用百分比布局， 如 width:50%

                            5、不支持在 css 里写背景图  background-image,但可以使用 image 组件和层级来实现类似 web中的背景效果。因为原生开发本身也咩有web这种背景图概念

                            6、使用 image 标签，支持使用 base64，不支持 svg格式图片

                            7、nvue的各组件在安卓端默认是透明的，如果不设置 background-color,可能会导致出现重影的问题

                            8、文字内容，必须只能在 text 组件下，text组件不能换行写内容，否则会出现无法取出的周报空白。

                            9、只有 text 标签可以设置字体大小，字体颜色

                            10、不支持  /deep/



                            ★、HBuilderX 3.1.0+ 开始支持更多简写样式  ：

                                    border
                                    border-top
                                    border-right
                                    border-buttom
                                    border-left
                                    border-style
                                    border-width
                                    border-color
                                    border-radius
                                    flex-flow
                                    background
                            
                            ★、HBuilderX 3.1.0+ 开始支持新的样式编译模式

                                    新增 nvueStyleCompiler 配置，支持组合选择器 相邻兄弟选择器、普通兄弟选择器、子选择器、后代选择器）

                                    nvue的uni-app编译模式下，App.vue 中的样式，会编译到每个 nvue文件。

                                    对于共享样式，如果有不和发属性控制台会给出警告，可以通过"条件编译"  APP-PLUS-NVUE 来屏蔽掉App中的警告。
            */

            /*
                二、盒模型


                         1、盒模型概念

                                        nvue的盒模型基于css盒模型，每个nvue元素都可以视作一个盒子。 我们一般子安讨论设计或布局时，会提到 "盒模型" 这个概念。

                                        盒模型描述了一个元素锁占用的空间。 每一个盒子有四条边界 ：  

                                                ①、外边距边界  margin edge

                                                ②、边框边界   border edge

                                                ③、内边距边界  padding edge

                                                ④、内容边界   context edge


                                                盒模型图片：  https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/flexBox.png

                                                nvue的盒模型的 box-sizing 默认为 border-box ，即盒子的宽高包含 内容、内边距、边框的宽度，不保哈外边距的宽度。

                                                在Android平台， nvue 只支持 overflow:hidden;

                                                在 ioss 上，nvue支持 overflow:hidden 和 overflow:visible ,默认是 overflow:visible


                         2、基本用法

                                    <template>
                                        <view>
                                            <image style="width: 400rpx; height: 200rpx; margin-left: 20rpx;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png"></image>
                                        </view>
                                    </template>

                         3、内边距

                                   padding ： 内边距  ，内容和边框之间的距离，默认值0.与标准css类似， padding支持简写，也可以分解为4个：

                                      
                                        可选值                       描述

                                        padding                     上右下左，默认值为0

                                        padding-left                左内边距，默认值0

                                        padding-right               右侧内边距，默认0

                                        padding-top                 上内边距，默认0

                                        padding-bottom              下内边距，默认0

                        4、边框

                                   ①、border-style   设定边框样式，如果四个方向的边框样式不同，可分别设置


                                            可选值                        描述

                                            border-left-style            可选值为 solid， dashed，dotted，默认solid

                                            border-top-style             可选值为 solid， dashed，dotted，默认solid

                                            border-right-style           可选值为 solid， dashed，dotted，默认solid

                                            border-bottom-style          可选值为 solid， dashed，dotted，默认solid

                                   ②、border-width

                                            border-width: 设定边框宽度，非负值，默认0，如果四个方向的边框宽度不同，可分别设置：

                                            可选值                         描述

                                            border-width                  非负值，默认0

                                            border-left-width            非负值，默认0

                                            border-right-width             非负值，默认0

                                            border-top-width               非负值，默认0

                                            border-bottom-width            非负值，默认0


                                   ③、border-color

                                            border-color: 设置边框的颜色，默认值#000000 ，如果四个方向的边框颜色不同，可分别设置

                                            可选值                          描述

                                            border-color                    默认值 #000000
                                            border-left-color               默认值 #000000
                                            border-right-color              默认值 #000000
                                            border-top-color                默认值 #000000
                                            border-bottom-color             默认值 #000000

                                   ④、border-radius

                                            border-radius  : 设置边框的圆角，默认值0，如果四个方向的圆角弧度不同，可分别设置：

                                            可选值                           描述

                                            border-radius                   非负值，默认值0
                                            border-bottom-left-radius       非负值，默认值0
                                            border-bottom-right-radius       非负值，默认值0
                                            border-top-left-radius           非负值，默认值0
                                            border-top-right-radius          非负值，默认值0


                        5、外边距
                        
                                    margin ：外边距，元素和元素之间的空白距离，默认值0。 与标准css类似，margin支持简写，也可分解为四边：
                                    
                                             可选值                          描述

                                             margin                          上右下左，默认0
                                             margin-left                     左外边距，默认值0
                                             margin-right                    右外边距，默认值0，
                                             margin-top                      上外边距，默认值0
                                             margin-bottom                   下外边距，默认值0

                        
                        ★、Android兼容性

                                    尽管 overflow:hidden 在Android 上是默认行为，但只有下列条件都满足时，一个父view才会区剪切他的子view。

                                     ①、父 view 是 view、cell、refresh 或 loading

                                     ②、系统版本是Android 4.3 或更高。

                                     ③、系统版本不是 7.0

                                     ④、父 view 没有background-image 属性或系统版本是Android 5.0 或更高
            */

            /*
                三、Flexbox
                
                            1、Flex容器

                                    flex 是 Flexbox的缩写，意思为 "弹性布局"，用来为盒模型提供最大的灵活性。

                                    nvue布局模型基于 CSS Flexbox，以便所有页面元素的排能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。

                                    Flexbox 包含 flex 容器和 flex 成员项。

                                    如果一个 nvue元素可以容纳其他元素，那么它就成为flex容器。

                                    （文档中未说明的 flexbox 属性均不支持：如 order、flex-grow 、flex-shrink 、 flex-basis、align-content、align-self 等）


                                  ★、 在 nvue 中 ，Flexbox是默认且唯一的布局模型，所以你不需要手动为元素添加 display:flex 属性。


                            2、flex-direction

                                    定义了 flex 容器中flex成员的排列方向，默认值为 column

                                         可选值                       描述

                                         column                      竖排，从上到下

                                         column-reverse              反向竖排，排布方向与 flex-direction:column 相反

                                         row                         横排，从左到右

                                         row-reverse                 方向横排，排布方向与 flex-direction:row 相反


                            3、flex-wrap

                                    决定了flex成员项在一行还是多行分布，默认值为 nowrap

                                         可选值                      描述

                                         nowrap                     不换行，flex成员项在一行排布，排布的开始位置由direction指定

                                         wrap                       换行，第一行在上方，flex成员项在多行排布，排布的开始位置由direction指定

                                         wrap-reverse               换行，第一行在下方，行为类似于 wrap，排布方向与其相反。

                            4、justify-content

                                     定义了flex容器中flex成员项在主轴方如何排列一处理空白部分。默认值为flex-start.

                                         可选值                       描述

                                         flex-start                   左对齐，所有的flex成员项都排列子容器的前部

                                         flex-end                     右对齐，则意味着成员项排列在容器的后部

                                         center                       居中，即中间对齐，成员项排列在容器中间、两百年留白

                                         space-between                两端对齐，空白均匀地填充的flex成员项之间

                                         space-around                 表示flex成员项两侧的间隔相等，所以，成员项之间的间隔比成选项与边框的间隔大一倍。


                                         图片：  https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/justify-content.png


                            5、align-items
                                    
                                     定义了 flex 容器中flex成员项在纵轴方向撒花姑娘如何排列以处理空白部分。默认值为 stretch.

                                          可选值                         描述

                                          stretch                       即拉伸高度至 flex 容器的大小

                                          flex-start                    上对齐，所有的成员项排列在容器顶部

                                          flex-end                      下对齐，所有的成员项排列在容器底部

                                          center                        中间对齐，所有成员项都垂直地居中显示

                                          图片：   https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/align-items.png


                            6、flex
                                    
                                     flex属性定义了flex成员项可占用容器中剩余空间的大小。 flex：值为 number 类型。

                                         ①、如果所有的成员项设置相同的值 flex：1，它们将平均分配剩余空间。

                                         ②、经常中左自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区域flex：1，内容区则会自动放大占满剩余空间

                                         ③、如果一个成员项设置的值为 flex:2 ,其他的成员项设置的值为 flex:1,那么这个成员项所占用的剩余空间时其他成员项的2倍。
            
            
                                    ★、Flex成员项暂不支持 flex-shrink、flex-basis、align-content 属性

                                        该属性不支持 flex: flex-grow | flex-shrink | flex-basis 的简写。
            */

            /*
                四、position 定位

                            设置定位类型。默认值为 relative

                                   可选值               描述
                                   relative            是默认值，指的是相对位置

                                   absolute            绝对定位，以元素的容器作为参考系

                                   fixed               固定定位，保证元素在页面窗口中的对应位置显示，即使窗口是滚动的它也不会移动

                                   sticky              指定的是仅当元素滚动到页面之外是，元素会固定在页面窗口的顶部，达到吸顶效果/粘性定位

                                   （运用 position：sticky 或 position:fixed可实现头部导航栏固定（吸顶效果））

                                    （Android 兼容性）

                            如果定位元素超过容器边界，在Android下，超出部分将不可见，愿意在于Android端元素 overflow 默认值为 hidden.

                            但补签Android 暂不支持社会中 overflow:visible.

            */

            /*
                 五、Transition过渡动画

                            transition 允许css的属性值在一定的时间区间内平滑的过渡。

                            1、transition-property: 

                                    设置参与过渡动画的属性名，设置不同样式 transition 效果的键值对，默认为空，表示不执行任何过渡效果。


                                           参数名               描述

                                           width                宽度参与过渡动画

                                           height               高度参与过渡动画

                                           top                  顶部距离参与过渡东湖

                                           bottom               底部距离参与过渡动画

                                           left                 左侧距离参与过渡动画

                                           right                右侧距离参与过渡动画 

                                           background-color     背景颜色参与过渡动画

                                           opacity              透明度参与过渡动画

                                           transform            变换类型参与过渡动画


                            2、transition-duration
                                    
                                     指定过渡的持续时间(单位毫秒)，默认值是0，表示没有动画效果。


                            3、transition-delay

                                     指定请求过渡操作到执行过度之间的时间间隔(单位是毫秒或者秒)，默认值是0，表示没有延迟，在请求后立即执行过度。


                            4、transition-timing-function

                                    描述过渡的速度曲线，用于使过渡更为平滑。默认值是 ease 下表列出了所有合法的属性：


                                              参数名                描述

                                              ease                 transition 过渡逐渐变慢的过渡效果

                                              ease-in              transition 过渡慢速开始，然后变快的过渡效果

                                              ease-out             transition 过渡快速开始，然后变慢的过渡效果

                                              ease-in-out          transition 过渡慢速开始，然后变快，然后慢速结束的过渡效果

                                              linear               transition 过渡以匀速变化

                                              cubic-bezier(x1, y1, x2, y2)    使用三阶贝塞尔函数中自定义 transition 变化过程，
                                              
                                                                             函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier和 Bézier curve   

                                                                             https://cubic-bezier.com/?spm=a2c7j.-zh-docs-styles-common-styles.0.0.3f952164z39lZD#.17,.67,.83,.67

                                                                             https://en.wikipedia.org/wiki/B%C3%A9zier_curve?spm=a2c7j.-zh-docs-styles-common-styles.0.0.3f952164z39lZD


                                   eg：

                                            <template>
                                                <view class="row">
                                                    <view class="box" :class="{'active':isActive}" @click="isActive = !isActive">
                                                        <image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
                                                    </view>
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    data() {
                                                        return {
                                                            "isActive":false
                                                        }
                                                    }
                                                }
                                            <、/script>
                                            <style scoped>
                                                .row{
                                                    align-items: center;
                                                    justify-content: center;
                                                }
                                                .box{
                                                    margin:20px;
                                                    align-items: center;
                                                    justify-content: center;
                                                    border-radius: 10px;
                                                    width:200rpx;
                                                    height:200rpx;
                                                    background-color: #007AFF;
                                                    transition-property: width, height, background-color;
                                                    transition-duration:0.3s;
                                                    transition-delay:0.1s;
                                                    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
                                                }
                                                .active{
                                                    width:300rpx;
                                                    height:300rpx;
                                                    background-color: #6bd8ff;
                                                }
                                                .img{
                                                    width:80rpx;
                                                    height:80rpx;
                                                }
                                            </style>
            */

            /*
                六、Transform  转换

                            应用于元素的2D 或 3D 转换。  这个属性允许你将元素 旋转、缩放、一定、倾斜等

                                        参数名                                      描述

                                        translateX({<length/percentage>})           X 轴方向平移，支持长度单位或百分比。

                                        translateY({<length/percentage>})           Y 轴方向平移，支持长度单位或百分比。

                                        translate({<length/percentage>} {<length/percentage>})   X 轴和 Y 轴方向同时平移，translateX + translateY 简写。

                                        scaleX(<number>)                             X 轴方向缩放，值为数值，表示缩放比例，不支持百分比。
                                            
                                        scaleY(<number>)                             Y 轴方向缩放，值为数值，表示缩放比例，不支持百分比。

                                        scale(<number>)                              X 轴和 Y 轴方向同时缩放，scaleX + scaleY 简写。

                                        rotate(<angle/degree>)                      将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。
                                                                                    指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。

                                        rotateX(<angle/degree>)                     X 轴方向的旋转。

                                        rotateY(<angle/degree>)                     Y 轴方向的旋转。

                                        rotateZ(<angle/degree>)                     Z 轴方向的旋转。

                                        perspective(<length>)                       指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。
                                                                                    z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。Android 4.1及以上版本支持。

                            transform-origin {length/percentage/关键字(top/left/right/bottom)}:      设置一个元素变形的原点，仅支持 2D 坐标。


                              eg: 
                                        <template>
                                            <view class="card">
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isRotate = !isRotate" class="fill row-rotate " :class="{'rotate':isRotate}"></view>
                                                    </view>
                                                    <text>rotate(45deg) </text>
                                                </view>
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isScale = !isScale" class="fill row-scale" :class="{'scale':isScale}"></view>
                                                    </view>
                                                    <text>scale(2)</text>
                                                </view>
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isTranslateX = !isTranslateX" class="fill row-translateX" :class="{'translateX':isTranslateX}"></view>
                                                    </view>
                                                    <text>translateX(45px)</text>
                                                </view>
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isTranslateY = !isTranslateY" class="fill row-translateY" :class="{'translateY':isTranslateY}"></view>
                                                    </view>
                                                    <text>translateY(45px)</text>
                                                </view>
                                            </view>
                                        </template>
                                        <script>
                                            export default {
                                                data() {
                                                    return {
                                                        "isRotate": false,
                                                        "isScale":false,
                                                        "isTranslateX":false,
                                                        "isTranslateY":false
                                                    }
                                                },
                                            }
                                        <\/script>
                                        <style>
                                            .card {
                                                width:710rpx;
                                                margin:20rpx;
                                                flex-direction:row;
                                                flex-wrap: wrap;
                                            }
                                            .box{
                                                width:355rpx;
                                                height:355rpx;
                                                justify-content: center;
                                                align-items: center;
                                            }
                                            .row-box{
                                                width:200rpx;
                                                height:200rpx;
                                                margin:10rpx;
                                                background-color: #DDDDDD;
                                            }
                                            .fill{
                                                width:200rpx;
                                                height:200rpx;
                                                position: relative;
                                                background-color: #03A9F4;
                                                opacity: 0.5;
                                            }
                                            .row-rotate{
                                                transition-duration:0.3s;
                                                transform:rotate(0deg);
                                            }
                                            .rotate{
                                                transition-duration:0.3s;
                                                transform:rotate(45deg);
                                            }
                                            .row-scale{
                                                transition-duration:0.3s;
                                                transform:scale(1);
                                            }
                                            .scale{
                                                transform:scale(2);
                                            }
                                            .row-translateX{
                                                transition-duration:0.3s;
                                                transform:translateX(0px);
                                            }
                                            .translateX{
                                                transform:translateX(45px);
                                            }
                                            .row-translateY{
                                                transition-duration:0.3s;
                                                transform:translateY(0px);
                                            }
                                            .translateY{
                                                transform:translateY(45px);
                                            }
                                        </style>    
            */

            /*
                七、伪类

                                        参数名                  描述

                                        active                  所有组件都支持

                                        focus                   只有input 组件 和 textarea 组件支持

                                        disabled                只有input 组件 和 textarea 组件支持

                                        enabled                 只有input 组件 和 textarea 组件支持

                                注意： 同时生效的时候，优先级高的覆盖优先级低的。  例如：  input:active:enabled 和 input:active 同时生效，前者覆盖后者



                                互联规则如下：

                                        https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/active.png

            */

            /*
                 八、线性渐变

                            所有组件均支持线性渐变。 CSS3渐变你可以通过 background-image 属性创建线性渐变

                            eg:

                                background-image:linear-gradient(to bottom right,#AD18F9,#05DFC7)

                            只支持两种颜色的渐变，渐变方向如下：

                                渐变方向               描述

                                to right              从左到右渐变

                                to left              从右到左渐变

                                to bottom            从顶部到底部渐变

                                to top              从底部到顶部渐变

                                to bottom right      从左上角到右下角渐变

                                to top left          从右下角到左上角渐变


                            ★、注意

                                    background-image 优先级高于 background-color，这意味着同时设置 background-image 和 background-color，background-color 被覆盖。 
                                    
                                    background 不支持简写。
            */


            /*
                  九、阴影

                            阴影 box-shadow

                                        {box-shadow:inset offset-x offset-y blur-radius color}

                                        {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径  阴影颜色}


                                    参数                            描述

                                    inset (可选)                    默认阴影在边框外。 使用inset后，阴影在边框内（即使是透明边框），背景之上内容之下
                                    
                                    offset-x                        设置水平偏移量，如果是负值则阴影位于元素左边

                                    offset-y                        设置垂直偏移量，如果负值则阴影位于元素上面

                                    blur-radius                     设置模糊半径，px单位长度值，值越大，抹布面积越大，阴影就越大越淡。默认值为0，此时阴影边缘锐利。

                                    color                           设置阴影颜色


                            eg:
                                    .box4 {
                                        box-shadow: inset 3px 5px 20px rgb(255, 69, 0);
                                    }    
            */

            /*
                 十、Android 平台阴影

                          1、阴影 box-shadow

                                从HBuilderX3.4.3起，重新支持阴影样式(box-shadow)。修复老版本组件设置box-shadow后在不同系统版本出现的显示异常及闪烁问题! 

                                但需要注意设置阴影样式(box-shadow) 的组件需要让出阴影渲染位置，否则会出现阴影显示不全的问题。

                                eg:

                                    <template>
                                        <view class="wrapper">
                                            <view>
                                                <view class="box">
                                                    <text class="title" style="text-align: center">Hello World</text>
                                                </view>
                                            </view>
                                        </view>
                                    </template>
                                    <style>
                                        .box {
                                            width: 300px;
                                            height: 100px;
                                            background-color: #FFE4C4;
                                            border-radius: 10px;
                                            box-shadow: 3px 5px 2px rgb(255, 69, 0);
                                            margin: 10px;//让出阴影位置
                                        }
                                    </style>

                        2、阴影 elevation

                                目前Android平台对阴影样式(box-shadow)支持的还不太完善，有设置圆角边框时阴影样式显示不正常、占用组件视图渲染区域等问题。

                                为解决这些问题，从HBuilderX 2.4.7起，新增elevation属性（组件的属性，不是css样式）设置组件的层级，Number类型，
                                
                                层级值越大阴影越明显，阴影效果也与组件位置有关，越靠近页面底部阴影效果越明显

                                用法：

                                    <view elevation="5px"></view>


                              ★、注意

                                        ①、设置elevation 属性产生的阴影暂时无法修改颜色

                                        ②、设置 elevation 后当前组件的层级会高于其他未设置elevation组件的层级，都设置elevation值域越大则层级越高！

                                           组件覆盖的场景需要留意

                                        ②、为了避免 elevation 属性的阴影效果与阴影样式(box-shadow)冲突，设置elevation 属性后 box-shadow样式失效。

                                        ④、使用 elevation 需要阴影元素的父元素大于阴影范围，否则会对阴影进行裁剪

                                        ⑤、ios不支持elevation属性，请使用 box-shadow 设置阴影

                                        ⑥、设置 box-shadow 需要当前组件让出阴影位置。否则无法正常看到阴影。
            */

            /*
                  十一、文本样式

                            1、color

                                    color: 文字颜色，支持如下字段：

                                            ①、RGB (rgb(255,0,0))

                                            ②、RGBA (rgb(255,0,0,0.5))

                                            ③、十六进制 (#ff0000)

                                            ④、精简写法的十六进制 (#f00)

                                            ⑤、色值关键字 (red)

                            2、font-size

                                    font-size :  文字大小，只有text 标签可以设置字体大小。


                            3、font-style

                                    font-style: 字体类别。 可选值 normal | italic ,默认为 normal.

                            4、font-weight
                                    
                                    font-weight: 字体粗细程度。默认值 normal

                                    ①、可选值：  normal、bold、100、200、300、400、500、600、700、800、900

                                    ②、normal 等同于400，bold 等同于700

                                    ③、ios 支持9种 font-weight 值； Android 仅支持400 和 700，其他只会设置为400 或 700

                                    ④、类似 lighter,bolder 这样的值不支持

                            5、text-decoration

                                    text-decoration: 字体装饰。默认值为 none。

                                        可选值                描述

                                        none                  默认。定义标准的文本

                                        underline             定义文本下的一条线

                                        line-through          定义穿过文本的一条线

                                    只支持 text  和 richtext

                                    不支持  text-decoration:overline

                            6、text-align
                                    
                                    text-align: 对齐方式。默认值为 left

                                         可选值                 描述

                                         left                   把文本排列到左边

                                         center                 把文字排列到中间

                                         right                  把文本排列到右边

                            7、font-family

                                     font-family  : 设置字体。 这个设置不保证在不同的平台，设备间的一致性。

                                    如所选设置在平台上不可用，将会降级到平台默认字体。
                                    
                                    如果需要加载自定义字体，请参考相关：https://zh.uniapp.dcloud.io/tutorial/nvue-api.html#addrule

                            8、text-overflow
                            
                                    text-overflow: 设置内容超长时的省略样式。

                                          可选值                 描述

                                          clip                  修剪文本

                                          ellipsis              显示省略符号来代表被修剪的文本

                                    只支持 text 和 richtext


                            9、lines

                                    lines :正整数 ，指定最大文本行数，默认 lines 值为0，表示不限制最大行数 lines。 

                                    如果文本不够长，实际展示行数会小于指定行数。

                            10、line-height

                                    line-height:正整数，每行文字高度。

                                    line-height 是top 至 bottom的距离。line-height 与 font-size 没有关系，因为 line-height 被top和bottom限制，

                                    font-size 被 glyph所解析。

                                    line-height  和 font-size 相等一般会导致文字被截断。

                            11、word-wrap

                                    word-wrap: 对nvue来说 anywhere 表示在以字符为最小元素做截断换行，
                                    
                                    其他值或不指定该属性，都以英文单词为单位进行换行。


                                           可选值                描述

                                           break-word           在长单词或URL地址内部进行换行

                                           normal               只在允许的断字点换行

                                           anywhere             以字符为最小元素做截断换行


                                        ★、在 Android 平台暂不支持。





            */
        </script> 
    </body>
</html>